<!--
 * @Author: zhangduo 445629906@qq.com
 * @Date: 2024-05-05 13:56:59
 * @LastEditors: zhangduo 445629906@qq.com
 * @LastEditTime: 2024-05-05 15:48:17
 * @FilePath: \greencity-ui\src\components\Hamburger\index.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by zhangduo, All Rights Reserved. 
-->
<template>
  <div style="padding: 0 15px" @click="toggleClick">
    <svg
      :class="{ 'is-active': isActive }"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path
        d="M832.269474 832.404211v-213.557895h106.792421l-71.194948-177.960421h35.570527L796.833684 156.133053l-71.194947 249.155368h35.597474l-85.638737 171.304421-56.724211-171.304421 35.570526 35.570526L512.080842 13.931789 405.288421 369.690947h35.570526l-71.033263 213.557895-70.925473-148.911158 35.328 6.548211L227.462737 156.133053 156.267789 405.288421h35.570527l-106.765474 213.557895H191.865263v177.852631s-140.314947 61.709474-177.960421 106.765474c59.392-27.028211 121.101474-20.884211 213.557895-35.597474-27.917474 16.896-53.517474 19.968-71.194948 35.570527-39.073684 34.708211-106.900211 106.792421-106.90021 106.792421h426.981053s-146.458947-67.341474-142.362948-106.765474c2.425263-23.174737 48.64-54.298947 71.168-71.194947 22.016-1.158737 48.505263 0.377263 71.194948 0v71.194947h71.194947v-71.194947c179.092211 6.009263 362.981053 25.734737 462.551579 71.194947-32.875789-39.558737-177.825684-71.060211-177.825684-71.06021z m-355.786106-71.194948c-70.682947 1.536-153.141895 24.198737-213.557894 35.462737v-177.852632h71.168l-35.570527 35.624421h177.960421v106.765474z m284.725895 35.462737c-60.416-13.554526-140.584421-32.121263-213.423158-35.462737v-106.90021h177.960421l-35.570526-35.570527h71.141053v177.933474h-0.10779z"
        fill="#ffffff"
        p-id="4667"
      ></path>
    </svg>
  </div>
</template>

<script>
export default {
  name: "Hamburger",
  props: {
    isActive: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    toggleClick() {
      this.$emit("toggleClick");
    },
  },
};
</script>

<style lang="scss" scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  fill: #fff;
}

.hamburger.is-active {
  //transform: rotate(180deg);
}
</style>
